<script setup>
import { onMounted, nextTick, ref, reactive, watch, computed, watchEffect } from 'vue'
import { getAllWarning, getAllDepartment ,editWarning} from '../../network/net.js'
import { ElMessage } from 'element-plus'
let token = sessionStorage.getItem("token");
let bm = sessionStorage.getItem("bm");
let bmInfo = sessionStorage.getItem("bmInfo");


onMounted(() => {
    initWarn()
    // initAllDepartment()
})

const initWarn = () => {
    getAllWarning(token).then((res) => {
        if (res?.data?.code == "200" && res?.data?.data?.length > 0) {
            tableData.value = res?.data?.data;
            
        }
    });
}
const initAllDepartment = () => {
  getAllDepartment(token).then((res) => {
    console.log(res);
    
    if (res?.data?.code == "200" && res?.data?.data?.length > 0) {
      console.log(res?.data?.data);
      
    } else {
      tableData.value = []
    }
  });
};
initAllDepartment()
const tableData = ref([])
const departmentData = ref([])
const activeCell = reactive({
    row: null,
    column: null
})
const handleAc = (scope) => {
    activeCell.row = scope.$index
    activeCell.column = scope.cellIndex
}

const handleSave = (row) => {
    row.value = Number(row.value)
    editWarning(token, row).then((res) => {
        if (res?.data?.code == "200") {
            ElMessage.success("保存成功");
            activeCell.row = null
            activeCell.column = null
        }
    });

}

const handleElse = (scope) => {
    activeCell.row = null
    activeCell.column = null
}
</script>

<template>
    <div id="warn">
        <el-table :data="tableData" style="margin-bottom: 10px" row-key="id" border default-expand-all stripe>
            <el-table-column prop="departName" label="部门名称" sortable />
            <el-table-column prop="value" label="潮位警戒值(cm)" sortable>
                <template #default="scope">
                    <!-- <el-input v-model="scope.row.value" size="mini" style="width: 100px"></el-input> -->
                    <el-input v-if="scope.$index == activeCell.row && scope.cellIndex == activeCell.column"
                        v-model="scope.row.value" size="mini" style="width: 100px"></el-input>
                    <div class="edit_cell" @click="handleAc(scope)" v-else>
                        <span>
                            {{ scope.row.value }}
                        </span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="wave" label="海浪警戒值" sortable />
            <!-- 操作 -->
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button v-if="scope.$index == activeCell.row" type="primary" size="small"
                        @click="handleSave(scope.row)">保存</el-button>
                        <!-- 取消 -->
                    <el-button v-if="scope.$index == activeCell.row" type="info" size="small" @click="handleElse(scope)">取消</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<style lang="less" scoped>
#warn {
    padding: 5px;
    // .edit_cell{
    //     background-color: aquamarine;
    // }
}
</style>